<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/common.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.picker.css"/>
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.poppicker.css"/>
    <script src="__PUBLIC__/mui/js/mui.picker.js"></script>
    <script src="__PUBLIC__/mui/js/mui.poppicker.js"></script>
    <style>

        #member-login {
            display: none;
        }

        .area {
            margin: 20px auto 0px auto;
        }

        .mui-input-group {
            margin-top: 10px;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-group label {
            width: 35%;
            font-size: 15px;
            color: black;

        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 65%;
            font-size: 15px;
            text-indent: 1em;
            color: #333333;
        }

        .mui-input::-webkit-input-placeholder {
            text-align: right;

        }

        .enter .mui-input::-webkit-input-placeholder {
            padding-right: 1.5em;

        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }

        .mui-content-padded {
            margin-top: 25px;
        }

        .mui-btn {
            padding: 10px;
        }

        .link-area {
            display: block;
            margin-top: 25px;
            text-align: center;
        }

        .spliter {
            color: #bbb;
            padding: 0px 8px;
        }

        .oauth-area {
            position: absolute;
            bottom: 20px;
            left: 0px;
            text-align: center;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .oauth-area .oauth-btn {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0px 20px;
            /*-webkit-filter: grayscale(100%); */
            border: solid 1px #ddd;
            border-radius: 25px;
        }

        .oauth-area .oauth-btn:active {
            border: solid 1px #aaa;
        }

        .oauth-area .oauth-btn.disabled {
            background-color: #ddd;
        }

        .login-active {
            background: #f3363a;
        }

        .mui-input-group .enter {
            background: url("__PUBLIC__/images/enter-right.png") no-repeat;
        !important;
            background-position: right 1em center;
            background-size: auto 50%;
        }

        a {
            text-decoration: none;

        }

        .mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before {
            color: #ef373b;
        }

        .mui-card-header {
            border-top-right-radius: 2vw;
            border-top-left-radius: 2vw;
        }

        .mui-card {
            background: none;
            box-shadow: 0 0px 0px rgba(0, 0, 0, .3);
            position: relative;

        }

        .mui-card-header p {
            color: white;
            font-family: "Microsoft YaHei UI Light";
            font-size: 4vw;
            font-weight: bold;
            text-indent: 20vw;
            margin-bottom: 1vw;
            letter-spacing: 1.5px;
        }

        .mui-card-header .cardid {
            font-size: 5vw;
            margin-top: 2vw;
        }

        .cardlogo {
            width: 15vw;
            height: 17vw;
            position: absolute;
            background-image: url('__PUBLIC__/images/card.png');
            background-repeat: no-repeat;
            background-size: 80% auto;
            background-position: right bottom;
        }

        .setdefault {
            float: right;
            border: 1px solid white;
            margin: 1vw 0;
            padding: 0px 2px;
            text-align: center;
            position: absolute;
            right: 15px;
        }
        .delect{
            float: right;
            border: 1px solid white;
            margin: 1vw 0;
            padding: 0px 2px;
            text-align: center;
            position: absolute;
            right:28%;

        }
        .edit{
            display: block;width: 100%;height: 70%;
        }
        .mui-card-header.mui-card-media{
            height: 40vw;
        }
        @media screen and (min-width: 800px) {
            .mui-card-header p{
                font-size: 2vw;
                font-weight: bold;
                text-indent: 12vw;
                margin-bottom: 3.5vw;
                letter-spacing: 1.5px;
                line-height: 2vw;
            }
            .cardlogo{
                width: 10vw;
                height: 10vw;
            }
            .mui-card-header.mui-card-media{
                height: 25vw;
            }
            .mui-card-header .cardid{
                font-size: 2.2vw;
            }
        }
    </style>
    <link rel="stylesheet" href="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.css"/>
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.js"></script>
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/local/zh-CN.js"></script>
</head>
<body ng-app="myApp" ng-controller="Ctrl" ng-cloak>
<header class="mui-bar mui-bar-nav" style="background:#f3363a;" >
    <a class="mui-icon mui-icon-left-nav mui-pull-left" style="color: white" href="/index.php/Home/agen/member"></a>
    <h1 class="mui-title login-item" style="color: white">我的银行卡</h1>
</header>
<div class="mui-content">
    <div class="mui-card" ng-repeat="x in card" >
        <div class="mui-card-header mui-card-media" ng-show="x.isdefault == 2" style="background-image:url('__PUBLIC__/images/card_bg.png')">
            <input type="hidden" value="{{x.id}}" >
            <a  class="edit" href="javascript:void(0)"  ng-click='edit(x.id)'>
                <div class="cardlogo"></div>
                <p style="margin-top: 2vw">{{x.name}}</p>
                <p>{{x.bankname}}</p>
                <p class="cardid">{{x.number}}</p>
            </a>
            <p class="setdefault" style="text-indent: 0;"  ng-click='moren(x.id)'>设为默认</p>
            <p class="delect" style="text-indent: 0;"  ng-click='del(x.id)'>删除</p>
        </div>
        <div class="mui-card-header mui-card-media" ng-click="edit(x.id)" ng-show="x.isdefault == 1" style="background-image:url('__PUBLIC__/images/card_default.png')" >
            <input type="hidden" value="{{x.id}}" >
            <a  class="edit" href="javascript:void(0)"  ng-click='edit(x.id)'>
                <div class="cardlogo"></div>
                <p style="margin-top: 2vw">{{x.name}}<span style="float: right">默认</span></p>
                <p>{{x.bankname}}</p>
                <p class="cardid">{{x.number}}</p>
            </a>
        </div>
    </div>
    <div class="mui-card">
        <a href="/index.php/home/agen/carddetail">
            <div class="mui-card-header mui-card-media"
                 style="background-image:url('__PUBLIC__/images/addcard.png')"></div>
        </a>
    </div>
</div>
<include file="./Application/Home/View/pub/agentfoot.html" name="m"  />
<script>
    var app = getApp('myApp', []);
    app.controller('Ctrl', function ($scope, $http) {

        $http({
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function (obj) {
                var str = [];
                for (var p in obj) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
                return str.join("&");
            },
            url: "/index.php/Home/Account/bankcard"
        }).then(function successCallback(response) {
            $scope.card=response.data.data.cardlist;
            console.log($scope.card)
        }, function errorCallback(response) {
            errorHandle(response);
        });

        $scope.edit = function (obj) {
            /*   var data = {expid: $("#expid").val(), express: $("#showUserPicker").val(), sn: $scope.expsn};*/
             window.location.href='/index.php/home/agen/editcard?id='+obj;

        }

        /*删除*/
        $scope.del= function (obj) {
            $http({
                method: 'POST',
                data: {id: obj},
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Account/remove"
            }).then(function successCallback(response) {
                //console.log(response)
                if (response.data.code == -1) {
                    layer.msg(response.data.msg, {time: 1000})
                }
                else if (response.data.code == 0) {
                    layer.msg(response.data.msg, {time: 1000})
                    setTimeout(function () {
                        window.location.href = "/index.php/Home/agen/cardlist"
                    }, 1500)
                }
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }

        /*默认设置*/
        $scope.moren= function (obj) {
            $http({
                method: 'POST',
                data: {id:obj},
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Account/setDefault"
            }).then(function successCallback(response) {
                if (response.data.code == -1) {
                    layer.msg(response.data.msg, {time: 1000})
                }
                else if (response.data.code == 0) {
                    layer.msg(response.data.msg, {time: 1000})
                    setTimeout(function () {
                        window.location.href="/index.php/Home/agen/cardlist"
                    }, 1500)
                }
            }, function errorCallback(response) {
                errorHandle(response);
            });

        }

    });
</script>
</body>
</html>